<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: #212529;
        background-color: #f9f9f9;
        line-height: 1.5;
    }
    .site-header {
        background-color: #fff;
        box-shadow: 0 1px 10px rgba(0,0,0,0.05);
        padding: 15px 0;
    }
    .logo {
        font-size: 24px;
        font-weight: 700;
        color: #2b3a55;
        text-decoration: none;
    }
    .logo:hover {
        color: #3a4f76;
        text-decoration: none;
    }
    .search-form .form-control {
        border-radius: 50px 0 0 50px;
        border: 1px solid #e0e0e0;
        box-shadow: none;
    }
    .search-form .btn {
        border-radius: 0 50px 50px 0;
        background-color: #2b3a55;
        border-color: #2b3a55;
    }
    .search-form .btn:hover {
        background-color: #3a4f76;
        border-color: #3a4f76;
    }
    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        margin-left: auto;
    }
    .cart-link, .auth-links a, .user-dropdown .dropdown-toggle {
        color: #2b3a55;
        text-decoration: none;
        font-weight: 500;
        display: flex;
        align-items: center;
        padding: 5px 10px;
        transition: all 0.2s ease;
    }
    .cart-link:hover, .auth-links a:hover, .user-dropdown .dropdown-toggle:hover {
        color: #3a4f76;
    }
    .auth-links {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: flex-end;
    }
    .auth-links a {
        color: #2b3a55;
        text-decoration: none;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        padding: 5px 15px;
        transition: all 0.2s ease;
        border: 1px solid #2b3a55;
        border-radius: 20px;
        white-space: nowrap;
        flex-direction: row;
    }
    .auth-links a i {
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
    }
    .auth-links a span {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
    }
    .auth-links a:hover {
        background-color: #2b3a55;
        color: #fff;
    }
    .admin-link {
        color: #2b3a55;
        text-decoration: none;
        font-weight: 500;
        display: flex;
        align-items: center;
        padding: 5px 15px;
        transition: all 0.2s ease;
        border: 1px solid #2b3a55;
        border-radius: 20px;
        margin-left: 5px;
    }
    .admin-link:hover {
        background-color: #2b3a55;
        color: #fff;
    }
    .user-dropdown {
        position: relative;
    }
    .user-dropdown .dropdown-toggle {
        cursor: pointer;
    }
    .user-dropdown .dropdown-toggle::after {
        display: none;
    }
    .user-dropdown .dropdown-menu {
        min-width: 200px;
        border-radius: 8px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border: none;
        padding: 8px 0;
        margin-top: 10px;
        position: absolute;
        z-index: 1000;
        display: none;
        background-color: #fff;
    }
    .user-dropdown .dropdown-menu.show {
        display: block;
    }
    .user-dropdown .dropdown-item {
        padding: 8px 16px;
        font-weight: 500;
        transition: all 0.2s ease;
        display: block;
        width: 100%;
        clear: both;
        text-align: inherit;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        color: #2b3a55;
    }
    .user-dropdown .dropdown-item:hover {
        background-color: #f5f7fa;
        color: #3a4f76;
    }
    .user-dropdown .dropdown-item i {
        margin-right: 10px;
        color: #6c757d;
    }
    .user-dropdown .dropdown-divider {
        margin: 5px 0;
        height: 0;
        overflow: hidden;
        border-top: 1px solid #f0f0f0;
    }
    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #2b3a55;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        font-weight: bold;
        font-size: 14px;
    }
    .navbar-nav {
        gap: 10px;
    }
    .nav-link {
        color: #2b3a55;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .nav-link:hover, .nav-link.active {
        color: #3a4f76;
    }
    .navbar {
        background-color: #ffffff;
        border-bottom: 1px solid #eaeaea;
    }
    .navbar-light .navbar-toggler {
        border: none;
        outline: none;
    }
    .logout-btn {
        background-color: #f8f9fa;
        color: #dc3545;
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        text-decoration: none;
    }
    .logout-btn:hover {
        background-color: #f1f3f5;
        color: #c82333;
        text-decoration: none;
    }
    .logout-btn i {
        margin-right: 5px;
    }
    .user-info {
        display: flex;
        align-items: center;
        background-color: #f8f9fa;
        padding: 5px 12px;
        border-radius: 30px;
    }
    .user-area {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .cart-link {
        color: #2b3a55;
        text-decoration: none;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        padding: 5px 15px;
        transition: all 0.2s ease;
        border: 1px solid #2b3a55;
        border-radius: 20px;
        white-space: nowrap;
        flex-direction: row;
    }
    .cart-link i {
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
    }
    .cart-link:hover {
        background-color: #2b3a55;
        color: #fff;
    }
</style>

<!-- Header -->
<header class="site-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3">
                <a href="${pageContext.request.contextPath}/" class="logo d-flex align-items-center">
                    <span>运动商城</span>
                </a>
            </div>
            <div class="col-md-5">
                <form action="${pageContext.request.contextPath}/product/search" method="get" id="search-form" class="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索商品" name="keyword" id="search-input">
                        <button class="btn btn-primary" type="submit">搜索</button>
                    </div>
                </form>
            </div>
            <div class="col-md-4">
                <div class="header-actions">
                    <a class="cart-link" href="${pageContext.request.contextPath}/cart">
                        <i class="fas fa-shopping-cart"></i>购物车
                    </a>
                    <c:choose>
                        <c:when test="${empty sessionScope.user}">
                            <div class="auth-links">
                                <a href="${pageContext.request.contextPath}/login">
                                    <i class="fas fa-sign-in-alt"></i>登录
                                </a>
                                <a href="${pageContext.request.contextPath}/register">
                                    <i class="fas fa-user-plus"></i>注册
                                </a>
                                <a href="${pageContext.request.contextPath}/admin/login">
                                    <i class="fas fa-cog"></i>后台管理
                                </a>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div class="user-area">
                                <div class="user-dropdown">
                                    <div class="user-info dropdown-toggle" id="userDropdown">
                                        <c:set var="firstLetter" value="${fn:substring(sessionScope.user.username, 0, 1)}" />
                                        <div class="user-avatar">${firstLetter}</div>
                                        <span>${sessionScope.user.username}</span>
                                        <i class="fas fa-chevron-down ms-2"></i>
                                    </div>
                                    <div class="dropdown-menu" aria-labelledby="userDropdown">
                                        <a class="dropdown-item" href="${pageContext.request.contextPath}/user/profile">
                                            <i class="fas fa-user"></i> 个人中心
                                        </a>
                                        <a class="dropdown-item" href="${pageContext.request.contextPath}/order/list">
                                            <i class="fas fa-shopping-bag"></i> 我的订单
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/user/logout">
                                            <i class="fas fa-sign-out-alt"></i> 退出登录
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav main-nav">
                <li class="nav-item">
                    <a class="nav-link ${empty param.categoryId ? 'active' : ''}" href="${pageContext.request.contextPath}/">首页</a>
                </li>
                <c:forEach items="${categories}" var="category">
                    <li class="nav-item">
                        <a class="nav-link ${param.categoryId eq category.id ? 'active' : ''}" 
                           href="${pageContext.request.contextPath}/product/category/${category.id}">
                            ${category.name}
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</nav>

<!-- jQuery (必须在Bootstrap之前加载) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 主要自定义JS文件 -->
<script src="${pageContext.request.contextPath}/static/js/main.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取用户下拉菜单元素
    var dropdownToggle = document.querySelector('.user-dropdown .dropdown-toggle');
    var dropdownMenu = document.querySelector('.user-dropdown .dropdown-menu');
    
    // 只有当元素存在时才添加事件监听
    if (dropdownToggle && dropdownMenu) {
        // 点击切换下拉菜单显示状态
        dropdownToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            dropdownMenu.classList.toggle('show');
        });
        
        // 点击页面其他地方关闭下拉菜单
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.user-dropdown')) {
                dropdownMenu.classList.remove('show');
            }
        });
        
        // 防止点击下拉菜单内部时关闭菜单
        dropdownMenu.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }
});
</script> 